
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
    </head>
    <style>
        .form{
            margin: 158px auto;
            width: 304px;
            margin-left: 645px;
        }
        .form .dodo{
            text-align: center;
            font-size: 50px;
            font-weight: bold;
        }
    </style>
	<body>
		<form action="" name="form1" method="" class="form">
            <div class="dodo">豆豆豆</div>
			用户名：<input type="text" value="" id="usname" name="userName" /> <span style="display:none;color:red;font-size: 12px;" id="runame"></span><br />
		    密码：&nbsp;&nbsp;&nbsp;<input type="password" value="" id="paswad" name="password" /> <span style="display:none;color:red;font-size: 12px;" id="rname"></span><br />
		       <span style="display:none;color:red;" id="rname"></span>
		     性别：<input type="radio" name="sex" value="1" checked="checked" />男
		        <input type="radio" name="sex" value="0"  />女<br />
		   爱好：  <input type="checkbox"name="love" value="0" checked="checked" />听音乐
			   <input type="checkbox"name="love" value="1" />看电影
			   <input type="checkbox"name="love" value="2" />玩游戏<br />
		 城市：<select name="city" id="city">
		 	<option value="0">请选择</option>
		 	<option value="1">北京</option>
		 	<option value="2">上海</option>
		 	<option value="3">广州</option>
		 </select> <span style="display:none;color:red;font-size: 12px;" id="cire"></span> <br />
		 照片：<input type="file" name="shangchuan" id="shang" /><br />
		 个人简介：<textarea name="content" id="jianshao"></textarea> <span style="display:none;color:red;font-size: 12px;" id="rer"></span><br />
		    <input type="submit" value="提交" name="sub" id="sub" onclick="return visty();"/>
		</form>
	</body>
    <script src="js/jquery.js"></script>
    
    <script>
    //获取表单对象
var thform=document.forms['form1'];
console.log(thform);
//获取表单域对象
var el=thform.elements;
var usname=el['userName'];
var passwod=el['password'];
var city=el['city'];
var jian=el['jianshao'];
var runname=document.querySelector('#runame');
var rname=document.querySelector('#rname');
var cire=document.querySelector('#cire');
var rer=document.querySelector('#rer');
//判断是否为空
function visty(){
        if (usname.value==0){
            runname.innerHTML="用户名不能为空!!";
            runname.style.display='inline-block';
            return false;
        }
        else if(passwod.value==0){
            rname.innerHTML="密码不能为空!!";
            rname.style.display='inline-block';
            return false;
        }
        else if(city.value==0){
            cire.innerHTML="请选择城市!!";
            cire.style.display='inline-block';
            return false;
        }
        else if(jian.value==0){
            rer.innerHTML="个人简介不能为空";
            rer.style.display='inline-block';
            return false;
        }
        //验证用户名
        else if(usname.value.length<6){
            runname.innerHTML="用户名至少为六个字符!!";
            runname.style.display='inline-block';
            return false;
        }
        else if(/\W/.test(usname.value)){
            runname.innerHTML="用户名必须为字符，下划线或者字母";
            runname.style.display='inline-block';
            return false;
        }
        //验证密码
        else if (passwod.value.length<6){
            rname.innerHTML="密码至少为六个字符!!";
        rname.style.display='inline-block';
        return false;
        }
        else if(/^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/.test(passwod.value)){
            rname.innerHTML="密码强度弱";
        rname.style.display='inline-block';
        return false	;
        }
        else if(/^[A-Za-z0-9]{6,16}$/.test(passwod.value)){
            rname.innerHTML="密码强度中";
        rname.style.display='inline-block';
        return false;
        }
        
        else if (/\w/){
        rname.innerHTML="密码强度强";
        rname.style.display='inline-block';
        return false;
        }
    }


        usname.onfocus=function(){
            usname.value='';
            runname.style.display='none';
        }
        passwod.onfocus=function(){
            passwod.value='';
            rname.style.display='none';
        }
        jian.onfocus=function(){
            jian.value='';
            rer.style.display='none';
        }
            
    
    
    </script>
</html>